<?php

/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Wordkit
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>

<head>
	<meta charset="<?php bloginfo('charset'); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
	<div id="page" class="uk-section-default uk-preserve-color">

		<!-- <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e('Skip to content', 'wordkit'); ?></a> -->

		<header id="masthead" uk-sticky="animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky uk-box-shadow-small; cls-inactive: uk-navbar-transparent uk-dark; top: 200">

			<nav class="uk-navbar-container">
				<div class="uk-container uk-container-expand uk-section-default">
					<div uk-navbar>
						<div class="nav-overlay uk-navbar-left">
							<?php
							the_custom_logo();
							if (is_front_page() && is_home()) :
							?>
								<a class="uk-navbar-item uk-logo" href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
							<?php
							else :
							?>
								<a class="uk-navbar-item uk-logo" href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></<a>
							<?php
							endif;
							?>
						</div>
						<div class="nav-overlay uk-navbar-center uk-visible@m">
							<?php
							wp_nav_menu(array(
								'theme_location' => 'menu-1',
								'menu_id'        => 'primary-menu',
								'menu_class' 	 => 'uk-navbar-nav',
							));
							?>
						</div>
						<div class="nav-overlay uk-navbar-right">

							<a class="uk-navbar-toggle" uk-search-icon uk-toggle="target: .nav-overlay; animation: uk-animation-fade" href="#"></a>

							<!-- This is an anchor toggling the off-canvas -->
							<a class="uk-navbar-toggle" href="#offcanvas-nav" uk-navbar-toggle-icon uk-toggle></a>
							<!-- This is the off-canvas -->
							<div id="offcanvas-nav" uk-offcanvas="overlay: true">
								<div class="uk-offcanvas-bar">

									<?php
									wp_nav_menu(array(
										'theme_location' => 'menu-1',
										'menu_id'        => 'primary-menu',
										'menu_class' 	 => 'uk-nav uk-margin uk-hidden@m',
									));
									get_sidebar()
									?>

								</div>
							</div>

						</div>

						<div class="nav-overlay uk-navbar-left uk-flex-1" hidden>

							<div class="uk-navbar-item uk-width-expand">
								<form role="search" method="get" class="uk-search uk-search-navbar uk-width-1-1" action="<?php echo home_url('/'); ?>">
									<input type="search" class="uk-search-input" placeholder="<?php echo esc_attr_x('Search &hellip;', 'placeholder', 'wordkit'); ?>" value="" name="s" autofocus />
								</form>
							</div>

							<a class="uk-navbar-toggle" uk-close uk-toggle="target: .nav-overlay; animation: uk-animation-fade" href="#"></a>

						</div>
					</div>
			</nav>

		</header><!-- #masthead -->

		<div id="content" class="uk-section" uk-height-viewport="offset-top: true; offset-bottom: true">